import React from "react";
import { Platform } from "react-native";
import {
  createStackNavigator,
  createBottomTabNavigator
} from "react-navigation";

import TabBarIcon from "../components/TabBarIcon";

import LterScreen from "../screens/LterScreen";
import DataScreen from "../screens/DataScreen";
import SettingsScreen from "../screens/SettingsScreen";

const DataStack = createStackNavigator({
  Home: DataScreen
});

DataStack.navigationOptions = {
  tabBarLabel: "上报数据",
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === "ios" ? "ios-list" : "md-list"}
    />
  )
};

const LterStack = createStackNavigator({
  Home: LterScreen
});

LterStack.navigationOptions = {
  tabBarLabel: "系统状态",
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === "ios" ? "ios-cloud-outline" : "md-cloud-outline"}
    />
  )
};

const SettingsStack = createStackNavigator({
  Home: SettingsScreen
});

SettingsStack.navigationOptions = {
  tabBarLabel: "我的设置",
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === "ios" ? "ios-settings" : "ios-settings"}
    />
  )
};

export default createBottomTabNavigator({
  LterStack,
  SettingsStack
});
